<template>
  <div class="info-wrap">
    <Title title="更多上刊信息" style="font-size:16px; margin:10px 0 16px 0"/>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="moreJournalRules"
      :label-width="labelWidth"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="lineHeight32">
      <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}" type="flex">
        <!-- 固定字段 -->
        <el-col v-for="field in fields" :key="field.keyword" :span="field.type==='confirm'? 24 : rowSpan" :class="{'responsive-col-lg-8': field.type!=='confirm','label-collapse-global': isCollapse(field)}">
          <el-form-item v-if="field.type !== 'confirm'" :label="field.label" :prop="field.keyword">
            <selectWithoutHttp
              v-if="field.type === 'select'"
              v-model="formData[field.parentKey][field.keyword]"
              :list-data="field.options"
              :clearable="field.clearable || false"
              class="width240"
              style="margin-right: 10px;"
              placeholder="请选择"
            />
            <el-input
              v-else-if="field.type === 'input'"
              v-model="formData[field.parentKey][field.keyword]"
              type="text"
              size="small"
              class="width240"
              placeholder="请输入"
              maxlength="500"
            />
            <el-radio-group v-else-if="field.type === 'radio'" v-model="formData[field.parentKey][field.keyword]">
              <el-radio v-for="item in field.options" :label="item.id" :key="item.id">{{ item.value }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row v-else-if="formData[field.parentKey][field.keyword]" :class="{'response-create-row': !dialog, 'flex-wrap': dialog}" class="confirm">
            <el-col v-for="child in field.children" :span="rowSpan" :key="child.keyword" :class="{'label-collapse-global': child.labelCollapse}" class="responsive-col-lg-8">
              <div v-if="child.type==='switch'" class="flex-center checkbox-class">
                <el-checkbox v-model="formData[field.parentKey][field.keyword][child.keyword]"/>
                <span class="label">{{ child.label }}</span>
              </div>
              <template v-else>
                <el-form-item :label="child.label" :prop="`${field.keyword}_${child.keyword}`">
                  <el-input
                    v-if="child.type === 'number'"
                    v-model="formData[field.parentKey][field.keyword][child.keyword]"
                    class="width240"
                    placeholder="请输入"
                    oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                    name="fansNum"
                    type="number"
                    size="small"
                    @change="numberInputChange(field.keyword, child.keyword)"
                    @mousewheel.native.prevent
                  />
                  <el-input
                    v-else-if="child.type === 'input'"
                    v-model="formData[field.parentKey][field.keyword][child.keyword]"
                    type="text"
                    size="small"
                    class="width240"
                    placeholder="请输入"
                    maxlength="500"
                  />
                </el-form-item>
              </template>

            </el-col>
          </el-row>
        </el-col>
        <!-- 动态字段 -->
        <el-col v-for="(item) in formData.moreJournalKey.dynamicKey" :key="`${item.name}_${item.id}`" :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item :prop="`${item.name}_${item.id}`" class="dynamicKey-label">
            <ToolTip slot="label" :content="item.name"/>
            <dynamicKey :item="item"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import mixins from './mixins';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { moreJournalFields } from '@/views/resource/create/resourceData';

export default {
  components: { selectWithoutHttp },
  mixins: [mixins],
  model: {
    prop: 'modelData',
    event: 'changeValue'
  },
  props: {
    modelData: {
      type: Object,
      default: () => ({})
    },
    rowSpan: {
      type: Number,
      default: 12
    },
    isSigned: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    fields() {
      // platformCategory1: 微信 2: 微博 3:小红书 4.抖音 5:更多  6:直播 7:B站
      return moreJournalFields.filter(i => {
        return !i.platformCategory && !i.platform || i.platformCategory && i.platformCategory.includes(this.modelData.platformCategory) || i.platform && i.platform.includes(this.modelData.platformTypeName);
      });
    },
    moreJournalRules() {
      this.$refs['formRef'] && this.$refs['formRef'].clearValidate();
      const validateType = (msg, item) => {
        return (rule, value, callback) => {
          if (item || item === 0 || item === false) {
            callback();
          } else {
            callback(new Error(msg));
          }
        };
      };
      const rules = {};
      const platformCategory = this.modelData.platformCategory;
      const fields = this.fields.filter(j => {
        if (j.noRequiredPlatform) {
          return !j.noRequiredPlatform.includes(platformCategory) && (!!j.required || j.type === 'confirm');
        } else {
          return !!j.required || j.type === 'confirm';
        }
      });
      // 以下字段，未签约账号非必填，签约账号必填
      const dynamicValidKeys = ['isVoiceAnchor', 'isOnCamera', 'isFrameOut', 'masterFit', 'orderRequest', 'mutualselect', 'adExample'];
      fields.forEach(item => {
        let value = this.formData[item.parentKey][item.keyword];
        let requiredKey = item.keyword;
        let warnLabel = item.label;
        let required = !(!this.isSigned && dynamicValidKeys.includes(item.keyword));
        if (item.type === 'confirm') {
          if (this.formData[item.parentKey][item.keyword]['isConfirm']) {
            required = false;
          } else {
            const linkKey = item.children.find(j => j.keyword === 'isConfirm') && item.children.find(j => j.keyword === 'isConfirm').linkKey || 'cost';
            requiredKey = `${item.keyword}_${linkKey}`;
            warnLabel = item.children.find(j => j.keyword === linkKey) && item.children.find(j => j.keyword === linkKey).label;
            value = this.formData[item.parentKey][item.keyword][linkKey];
          }
        }
        if (required) {
          rules[requiredKey] = [{ required, trigger: item.trigger, validator: validateType(`请${item.trigger === 'change' ? '选择' : '输入'}${warnLabel}`, value) }];
        }
      });
      return this.isJournalPlatform ? { ...rules, ...this.formRules } : this.formRules;
    }
  },
  methods: {
    isCollapse(field) {
      if (field.keyword === 'mutualselect') {
        return this.isSigned;
      }
      return field.labelCollapse && this.isJournalPlatform;
    },
    // 动态字段
    numberInputChange(parentKey, key) {
      if (this.formData.additionalKey[parentKey][key]) this.formData.additionalKey[parentKey][key] = Number(this.formData.additionalKey[parentKey][key]).toFixed(2);
    }
  }
};
</script>
<style lang="scss" scoped>
.confirm {
  ::v-deep {
    .el-form-item {
      margin-bottom: 22px;
    }
  }
}
.checkbox-class {
  height: 32px;
  margin: 0 0 22px 0px;
  font-size: 14px;
  color: #666;
  .label {
    margin-left: 12px;
  }
}
.width240 {
  width: 240px;
  ::v-deep {
    .el-select {
      width: 240px;
    }
  }

}
</style>
